<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="420" draggable class="custom-dialog">
    <div class="pb-16px text-base font-500 text-dark-900 border-bottom-1">
      <div class="mb-6px flex items-center"><span class="text-icon loading">装</span>{{result.loadingPlaceProvinceName ||
        ''}}{{result.loadingPlaceCityName || ''}}{{result.loadingPlaceCountyName || ''}}{{result.loadingPlaceTownName ||
        ''}}{{result.loadingPlaceName
        || ''}}
      </div>
      <div class="flex items-center"><span class="text-icon unloading">卸</span>{{result.unloadingPlaceProvinceName ||
        ''}}{{result.unloadingPlaceCityName || ''}}{{result.unloadingPlaceCountyName ||
        ''}}{{result.unloadingPlaceTownName || ''}}{{result.unloadingPlaceName
        || ''}}
      </div>
    </div>
    <section class="flex flex-col items-center font-bold">
      <div class="p-16px">运价（元/吨）：<span class="text-yellow-500">{{result.freight}}</span>
        <span class="px-3">|</span>{{result.productName}}
      </div>
      <Qrcode :text="content" :width="280" :options="options"></Qrcode>
    </section>
    <template #footer>
      <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
  import { getTenantId } from '@/utils/auth'
  import * as goodsSourceApi from '@/api/transportation/goodsSource'

  const dialogVisible = ref(false)
  const dialogTitle = ref()
  const result = ref({})
  const content = ref('')
  const options = ref({
    margin: 0,
    width: 280,
    height: 280,
    correctLevel: "H"
  })

  const open = async (data) => {
    dialogVisible.value = true
    result.value = data
    dialogTitle.value = data.consignorName
    // mode: 1或者null为H5,2为小程序
    // const mode = 2
    const mode = await goodsSourceApi.getOrderReceiveMode({ tenantId: data.tenantId })
    if (mode === 2) {
      if (data.bizType === 1) {
        content.value = `${import.meta.env.VITE_DRIVER_URL}?appid=${import.meta.env.VITE_DRIVER_APPID}&path=/pages/order-receiving/order-receiving?planId=${data.planNo}&tenantId=${data.tenantId}&onlineGoodsSwitch=${data.onlineGoodsConfiguration}&isOperation=1#wechat-redirect`
      }
      if (data.bizType === 2) {
        content.value = `${import.meta.env.VITE_DRIVER_URL}?appid=${import.meta.env.VITE_DRIVER_APPID}&path=/pages/order-receiving/order-receiving?planId=${data.planNo}&tenantId=${data.tenantId}&saleSwitch=0&isOperation=1#wechat-redirect`
      }
    } else {
      content.value = `${import.meta.env.VITE_H5_URL}/login.html?id=${data.planId}&flag=0&isOperation=1`
    }
  }

  defineExpose({ open })
</script>
<style>
  .custom-dialog .el-dialog__body {
    padding: 20px 24px !important;
  }

  .text-icon {
    font-size: 14px;
    padding: 0px 4px;
    margin-right: 8px;
    color: #ffffff;
    border-radius: 4px;
    font-weight: 400;
  }

  .loading {
    background-color: #409EFE;
  }

  .unloading {
    background-color: #F78600;
  }
</style>